<style>
    #${className?uncap_first}-view {
        padding: 20px 25px 25px 0;
    }

    #${className?uncap_first}-view .layui-treeSelect .ztree li a, .ztree li span {
        margin: 0 0 2px 3px !important;
    }
</style>
<div class="layui-fluid" id="${className?uncap_first}-view">
    <form class="layui-form" action="" lay-filter="${className?uncap_first}-view-form">
        <#if columns??>
            <#list columns as column>
                <div class="layui-form-item<#if column.isKey = true> zzdz-hide </#if>">
                    <label class="layui-form-label zzdz-form-item-require">${column.remark}：</label>
                    <div class="layui-input-block">
                        <input type="text" name="${column.field?uncap_first}" autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
            </#list>
        </#if>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['zzdz', 'form'], function () {
        var $ = layui.$,
            form = layui.form,
            ${className?uncap_first} = [[${r'${'}${className?uncap_first}${r'}'}]];
        form.render();

        init${className}Value();

        function init${className}Value() {
            form.val("${className?uncap_first}-view-form", {
                <#if columns??>
                <#list columns as column>
                "${column.field?uncap_first}" : ${className?uncap_first}.${column.field?uncap_first},
                </#list>
                </#if>
            });
        }
    });
</script>